<!doctype html>
<html lang="en" data-theme="light">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>G6: Preview</title>
    <script type="module">
      import { iconfont } from '@/src';
      const style = document.createElement('style');
      style.innerHTML = `@import url('${iconfont.css}');`;
      document.head.appendChild(style);
    </script>
    <style>
      body {
        margin: 0;
        font-size: 14px;
        color: var(--text-color);
        background-color: var(--background-color);
        background-image:
          linear-gradient(var(--stroke-color) 1px, transparent 1px),
          linear-gradient(90deg, var(--stroke-color) 1px, transparent 1px);
        background-size: 25px 25px;
        transition: all 0.5s;
      }

      #panel {
        z-index: 1;
        position: absolute;
        right: 0;
      }

      #container {
        width: 500px;
        height: 500px;
        border: 1px solid var(--stroke-color);
      }

      [data-theme='light'] {
        --text-color: #000;
        --background-color: #fff;
        --background-color2: #ddd;
        --stroke-color: #0001;
      }

      [data-theme='dark'] {
        --text-color: #fff;
        --background-color: #000;
        --background-color2: #333;
        --stroke-color: #333;
      }
    </style>
  </head>

  <body style="font-family: Arial, Helvetica, sans-serif">
    <div id="panel"></div>
    <div id="app"></div>
    <script type="module" src="./main.ts"></script>
  </body>
</html>
